<template>
  <div>
    <div class="list flex grow column">
      <div class="title-1 flex flex-center">
        <img
          :src="PIC_URL + '/tlbypcWeb/home/jqxd.png'"
          @error="
            $fn.imageHandler(path + '/client/home/images/jqxd.png', $event)
          "
        />
        <span class="name">{{ name }}</span>
        <i class="grow"></i>
        <router-link class="link" to="/home">返回上一级</router-link>
      </div>
      <div class="items flex column grow">
        <div
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div class="box">
            <div
              class="item flex"
              v-for="(item, i) in list"
              :key="i"
              @click="link(item.id, item.title)"
            >
              <span class="name grow">{{ item.title }}</span>
              <span class="time">{{ item._time }}</span>
            </div>
          </div>
        </div>

        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :current-page="currentPage"
          :total="total"
          :page-size="15"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { CLIENT } from "@/common/const";
import { getSkills } from "../../api/index";
import dayjs from "dayjs";

export default {
  data() {
    return {
      currentPage: 1,
      name: this.$route.query.name,
      list: [],
      total: 0,
      loading: true,
      path: CLIENT,
    };
  },
  mounted() {
    this.getSkills();
  },
  methods: {
    changePage(num) {
      this.currentPage = num;
      this.getSkills();
    },
    getSkills() {
      this.loading = true;
      getSkills({ pageSize: 15, currentPage: this.currentPage }).then(
        (back) => {
          if (back.status == 1) {
            let data = back.data;
            this.loading = false;
            this.total = +data.total;
            this.list = data.list.map((item) => {
              item._time = dayjs(item.createTime).format("YYYY-MM-DD");
              return item;
            });
          }
        }
      );
    },
    link(id, title) {
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"link","data":{"url":"${CLIENT}/client/articleDetail.html?skillId=${id}","title":"${title}"}}]`
      );
    },
  },
};
</script>
<style lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  .el-pager {
    display: flex;
    align-items: center;
    margin: 0 5px;
  }
  span {
    color: #bcbfc4;
  }
  .number {
    padding: 10px 12px;
    text-align: center;
    background: #25262a !important;
    border: 1px solid #323337;
    color: #bcbfc4 !important;
  }
  .active {
    border: 1px solid #ac0001;
    color: #bcbfc4 !important;
  }
  button {
    background: transparent !important;
  }
}
</style>
<style scoped lang="scss">
.title-1 {
  font-size: 20px;
  background: #27282e;
  padding: 20px;
  border-bottom: 1px solid #323337;
  .name {
    font-weight: bold;
    color: #bcbfc4;
  }
}
.list {
  width: 1200px;
  margin: auto;
}
.items {
  background: #090910;
  .box {
    border: 1px solid #25262a;
  }
}
.item {
  color: #bcbfc4;
  padding: 13px;
  cursor: pointer;
  font-size: 17px;
  &:hover {
    background: #323337;
  }
}
.link {
  font-size: 14px;
  color: #bcbfc4;
}
</style>
